/*
  学习目标：Todos 案例
  需求1. ✅组件拆分
    1.1 Header Main Footer
  需求2. ✅渲染列表
  需求3. ✅更新数据
  需求4. ✅删除一条数据功能
  需求5. 剩余任务的功能
  需求6. ✅Header改造为受控组件
  需求7. ✅回车新增功能
  需求8. ✅小选影响全选

*/
import React from 'react';
import './styles/base.css';
import './styles/index.css';

export default class App extends React.Component {
  // 2.1 声明state在App组件中，为了能让Header与list通信，使用状态提升
  state = {
    list: [
      {
        task: '学习React',
        isDone: false,
        id: 1,
      },
      {
        task: '学习Vue',
        isDone: true,
        id: 2,
      },
    ],
  };

  // 7.1 定义新增方法
  handleAdd = (task) => {
    // 7.5 新增数据到list中
    let newList = this.state.list.slice();
    newList.push({ task, isDone: false, id: Date.now() });
    this.setState({ list: newList });
  };

  // 4.1 定义删除方法
  handleDelById = (id) => {
    const newList = this.state.list.filter((item) => {
      if (item.id !== id) return item;
    });
    console.log('newList  ----->  ', newList);
    // 4.4 编写删除逻辑
    this.setState({
      list: newList,
    });
  };

  // 3.1 定义方法修改list，接收id，通过id更新一条数据
  handleUpdateList = (id) => {
    console.log(id);
    // 在react中只能通过setState修改list，state是只读的，通过新值覆盖旧值
    const newList = this.state.list.map((item) => {
      return {
        ...item,
        isDone: id === item.id ? !item.isDone : item.isDone,
      };
    });

    // 3.4 setState修改list
    this.setState({
      list: newList,
    });
  };

  render() {
    // 8.1 定义计算属性isAll
    // 💥利用state变化render会重新执行, 变量会重新计算，可以在这里定义计算属性
    const { list } = this.state;
    const isAll = list.length ? list.every((item) => item.isDone) : false;

    return (
      <section className="todoapp">
        {/* 头部 */}
        {/* 7.2 父传子回调函数 */}
        <Header handleAdd={this.handleAdd}></Header>
        {/* 主体 */}
        {/* 2.2 通过父传子技术，传list给Main组件 */}
        {/* 💥在React中不需要先定义props，可以直接使用 */}
        {/* 3.2 父传子回调函数 */}
        {/* 4.2 父传子回调函数 */}
        <Main
          list={this.state.list}
          handleUpdateList={this.handleUpdateList}
          handleDelById={this.handleDelById}
          // 8.2 父传子传给Main组件
          isAll={isAll}
        ></Main>
        {/* 底部 */}
        <Footer></Footer>
      </section>
    );
  }
}

class Header extends React.Component {
  //  6.1 在Header组件中声明state.task
  state = {
    task: '',
  };

  handleChange = (e) => {
    this.setState({ task: e.target.value });
  };

  // 7.3 监听回车事件
  hadnleKeyDown = (e) => {
    // 判断是否为回车键
    if (e.keyCode === 13) {
      // 7.4 触发新增的handleAdd函数
      this.props.handleAdd(e.target.value);
    }
  };

  render() {
    const { task } = this.state;
    return (
      <header className="header">
        <h1>todos</h1>
        {/* //  6.2 state控制value */}
        <input
          className="new-todo"
          placeholder="需要做什么"
          autoFocus
          value={task}
          //  6.3 onChange修改state
          onChange={this.handleChange}
          onKeyDown={this.hadnleKeyDown}
        />
      </header>
    );
  }
}

class Main extends React.Component {
  render() {
    //  2.3 结构props得到list，遍历list渲染时生成多个li
    const { list, handleUpdateList, handleDelById, isAll } = this.props;
    return (
      <section className="main">
        {/* 8.3 将isAll绑定给全选框的checked属性*/}
        <input id="toggle-all" className="toggle-all" type="checkbox" checked={isAll} />
        <label htmlFor="toggle-all">全选</label>
        <ul className="todo-list">
          {/* 列表渲染 */}
          {list.map((item) => {
            return (
              // 2.4 三元运算符控制动态class
              <li className={item.isDone ? 'completed' : ''} key={item.id}>
                <div className="view">
                  <input
                    className="toggle"
                    type="checkbox"
                    checked={item.isDone}
                    // 3.3 点击触发回调
                    onChange={() => handleUpdateList(item.id)}
                  />
                  <label>{item.task}</label>
                  {/* 4.3 解构拿到回调函数，点击调用 */}
                  <button className="destroy" onClick={() => handleDelById(item.id)}></button>
                </div>
              </li>
            );
          })}
        </ul>
      </section>
    );
  }
}

class Footer extends React.Component {
  render() {
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>1</strong> 剩余
        </span>
        <ul className="filters">
          <li>
            <a className="all selected" href="#/">
              全部
            </a>
          </li>
          <li>
            <a className="active" href="#/active">
              未完成
            </a>
          </li>
          <li>
            <a className="completed" href="#/completed">
              已完成
            </a>
          </li>
        </ul>
        <button className="clear-completed">清除已完成</button>
      </footer>
    );
  }
}
